<template>
  <div class="wrap">
    <Header></Header>
    <div class="header-steps-wrap">
      <div class="header-steps-inner">
        <SkySteps v-model:active="active">
          <SkyStepItem title="基本信息" @click="currentclick(1)">
          </SkyStepItem>
          <SkyStepItem title="财务信息" @click="currentclick(2)">
          </SkyStepItem>
          <SkyStepItem title="项目经理档案" @click="currentclick(3)">
          </SkyStepItem>
          <SkyStepItem title="服务类别" @click="currentclick(4)">
          </SkyStepItem>
          <SkyStepItem title="申请入库" @click="currentclick(5)">
          </SkyStepItem>
        </SkySteps>
      </div>
    </div>

    <div class="main-container">

      <div class="drop-main" v-if="active==1">
        <BasicInformation></BasicInformation>
      </div>

      <div class="drop-main" v-if="active==2">
        <FinancialInformation></FinancialInformation>
      </div>

      <div class="drop-main" v-if="active==3">
        <ProjectManagerProfile></ProjectManagerProfile>
      </div>

      <div class="drop-main" v-if="active==4">
        <ServiceCategory></ServiceCategory>
      </div>

      <div class="drop-main" v-if="active==5">
        <ApplyForPut></ApplyForPut>
      </div>

    </div>

    <div class="footer"> </div>

  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted } from "vue";
  import Header from "@/layout/components/Header/index.vue";
  import {
    ApplyForPut,
    BasicInformation,
    FinancialInformation,
    ProjectManagerProfile,
    ServiceCategory,
  } from "./progress/index";

  export default defineComponent({
    components: {
      Header,
      ApplyForPut,
      BasicInformation,
      FinancialInformation,
      ProjectManagerProfile,
      ServiceCategory,
    },
    methods: {
      func1() {
        console.log("func1");
      },
    },
    setup(props, ctx) {
      onMounted(() => {
        console.log("ctx", ctx);
      });

      let active = ref(1);

      function currentclick(current) {
        // alert("ccc");
        active.value = current;
        // console.log("current", current);
      }

      return {
        active,
        currentclick,
      };
    },
    data() {
      return {
        // active: 2,
      };
    },
    // setup() {
    // },
  });
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 60px;
}
.header-steps-wrap {
  background: white;
  padding: 23px 95px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
  position: fixed;
  top: 60px;
  width: calc(100vw);
  z-index: 99;
  .header-steps-inner {
    width: 1164px;
    margin: 0 auto;
    padding: 0 50px;
  }
  margin-bottom: 20px;
}
.main-container {
  width: 1164px;
  margin: 0 auto;
  margin-top: 90px;
  padding-bottom: 50px;
  // background: white;
  min-height: 500px;
}

.footer {
  height: 60px;
  width: 100vw;
  position: fixed;
  bottom: 0;
  background: white;
}
</style>